<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-选择器进阶</title>
    <style>
        /* 复合选择器 */
        p span{
            color: red;
        }
        .box>span{
            color:blue;
        }
        #qq span{
            color: green;
        }
        #qq span i{
            color:pink;
        }
        ul li{
            width: 100px;
            height: 36px;
            /* 垂直居中 */
            line-height: 36px;
            /* 水平居中 */
            text-align: center;
            background: red;
            color: #fff;
            /* 去掉点 */
            list-style: none;
            /* 先让他们在一行显示 */
            display: inline-block;
        }
        /* 并集选择器 */
        i,em,strong{
            color: red;
            font-weight: bold;
        }
        /* 交集选择器 */
        ul li.cur{
            background: blue;
        }
        /* hover */
        nav a:hover{
            color: blue;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        1.复合选择器
            p span{}
            .box span{}
            #qq span{}
            #qq span i{} 3层左右即可
            子代选择器
            .box>span{}
            #qq p span a i{} XXX不推荐
        2.并集选择器
            语法: 选择器1,选择器2
            i,em,strong{}
        3.交集选择器
            语法:
                标签.类名
        4.emmet语法
            ul>li*3>a>{百度}
        5.hover选择器
            语法:
                选择器:hover{
                    属性名:属性值;
                }
     -->
    <!-- 1.复合选择器 -->
    <p><span>西安钟楼</span></p>
    <div class="box"><span>护城河</span></div>
    <div id="qq"><span>腾讯<i>新闻</i></span></div>
    <hr>
    <!-- 2.并集选择器 -->
    <i>中国</i>
    <em>西部</em>
    <strong>西安</strong>
    <!-- 3.交集选择器 -->
    <hr>
    <ul>
        <li>HTML5</li>
        <li class="cur">CSS3</li>
        <li>JS</li>
    </ul>
    <!-- 4.hover -->
    <nav>
        <a href="">H5</a>
        <a href="">Java</a>
        <a href="">Python</a>
    </nav>
</body>
</html>